<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div id="app"></div>
<script src="js/vue.js"></script>
<script>
  const app = Vue.createApp({
     setup(props, context){
        const {reactive, computed} = Vue;

        let numObj = reactive({count: 10});

        // 计算属性
        let cNum = computed({
            get: ()=>{
                return numObj.count * 10;
            },
            set: (res)=>{
                console.log(res);
                numObj.count = res / 10;
            }
        });

        setTimeout(()=>{
            numObj.count = 2000;
        }, 2000);

        // 定义一个函数
        const add = ()=>{
            numObj.count += 10;
        }

        return {
          numObj,
          cNum,
          add
        }
     },
     template: `
       <div>
          <h2>属性: {{numObj.count}}</h2>
          <h2>计算属性: {{cNum}}</h2>
          <p>----------------------</p>
          <button @click="add()">变化</button>
       </div>
     `
  }).mount('#app');
</script>
</body>
</html>